<!--防错管理-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">防错管理</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="防错清单" name="first">
              </el-tab-pane>
              <el-tab-pane label="管理中台" name="second">管理中台</el-tab-pane>
              <el-tab-pane label="模型说明" name="third">模型说明</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->


    <!--抽屉放置区域-->
  </div>
</template>

<script>

import {tree_workshop_product_op_chinese} from "@/configUse";

export default {
  name: "errorProofing",
  components: {},
  data() {
    return {
      activeName:'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限

      //新导航用到的变量
      //导航筛选的变量
      filterText:'',
      // 导航的目录
      treeList:tree_workshop_product_op_chinese,
      //树形的导航用到的数据模板
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //点击的树形结构内容Data
      treeData:null,
      //点击的树形结构内容
      treeNode:null,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
        }
      })
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //通用，树形导航筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //单击树形导航结构的反应

  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
</style>